<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>图片捕获</title>
		<link rel="stylesheet" href="../src/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../dist/css/common.css" />
		<style type="text/css">
			.layui-form-switch {
				margin-top: 0;
			}
			
			.layui-form-radio {
				margin-top: 0;
			}
			
			.w-videos {
				height: 255px;
				padding: 5px;
				box-sizing: border-box;
				border: 1px solid #CCCCCC;
				border-radius: 5px;
			}
			
			.w-videos img {
				width: 100%;
				height: 220px;
			}
			
			.w-videos p {
				height: 25px;
				line-height: 25px;
				text-indent: 25px;
			}
			
			.w-line-gray {
				background: #CCCCCC;
				height: 1px;
				margin: 15px 0;
			}
		</style>
	</head>

	<body>
		<div class="layui-fluid">
			<div class="w-title"><span class="w-blueline"></span>
				<a href="###">图片捕获</a>
			</div>
			<div class="w-line-gray"></div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md3">
					<div class="w-videos">
						<img src="../dist/images/video_03.png" />
						<p>大屯村监测点1</p>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="w-videos">
						<img src="../dist/images/video_03.png" />
						<p>大屯村监测点1</p>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="w-videos">
						<img src="../dist/images/video_03.png" />
						<p>大屯村监测点1</p>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="w-videos">
						<img src="../dist/images/video_03.png" />
						<p>大屯村监测点1</p>
					</div>
				</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md3">
					<div class="w-videos">
						<img src="../dist/images/video_03.png" />
						<p>大屯村监测点1</p>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="w-videos">
						<img src="../dist/images/video_03.png" />
						<p>大屯村监测点1</p>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="w-videos">
						<img src="../dist/images/video_03.png" />
						<p>大屯村监测点1</p>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="w-videos">
						<img src="../dist/images/video_03.png" />
						<p>大屯村监测点1</p>
					</div>
				</div>
			</div>

		</div>
		<div id="page1"></div>
		<script src="../src/layui.js"></script>
		<script>
			layui.use('form', function() {
				var form = layui.form;

				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
			layui.use(['jquery'], function() {
				var table = layui.table;
				var $ = jQuery = layui.$;
				//第一个实例
			});
			layui.use('laypage', function() {
				var laypage = layui.laypage;

				//执行一个laypage实例
				laypage.render({
					elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
						,
					count: 50 //数据总数，从服务端得到
				});
			});
		</script>
	</body>

</html>